<template>
  <div>
    <div>
      <el-row>
<!--        <el-col :span="6">-->
<!--          <el-input-->
<!--            v-model="searchInput"-->
<!--            placeholder="根据员工id查找培训记录"-->
<!--            prefix-icon="el-icon-search"-->
<!--            @input="watchsearch"-->
<!--          ></el-input>-->
<!--        </el-col>-->
        <!--        <el-col :span="4">-->
        <!--          <el-button @click="getEmployeeById">-->
        <!--            搜索-->
        <!--          </el-button>-->
        <!--        </el-col>-->

<!--        <el-col :span="4">-->
<!--          <el-select v-model="seetype" placeholder="请选择查看类型" @change="ClearInput">-->
<!--            <el-option-->
<!--              v-for="item in options"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-col>-->
<!--        <el-col :span="4">-->
<!--          <el-button @click="newTrain">新建培训</el-button>-->
<!--        </el-col>-->
        <el-col :span="2">

          <el-button @click="exportExcel">导出培训表</el-button>
        </el-col>
        <el-col :span="4">
          <el-button @click="returnlogin">返回首页</el-button>
        </el-col>
      </el-row>
    </div>
    <div id="tables">
      <el-table
        :data="train"
        :row-style="{height: '0'}"
        :cell-style="{padding: '0'}"
        style="width: 100%"
        @row-click="getDetails"
        id="out-table"
      >
        <!--        <el-table-column label width="35">-->
        <!--          <template slot-scope="scope">-->
        <!--            <el-radio :label="scope.row.name" v-model="radioId">&nbsp;</el-radio>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column align="center" prop="trainrage" label="培训编列" width="75" fixed></el-table-column>
        <el-table-column align="center" prop="userId" label="员工Id" width="100" fixed></el-table-column>
        <el-table-column align="center" prop="username" label="姓名" width="75"></el-table-column>
        <el-table-column align="center" prop="gender" label="性别" width="75"></el-table-column>
        <el-table-column align="center" prop="trainskill" label="培训内容" width="75"></el-table-column>
        <el-table-column align="center" prop="trainstartdate" label="培训开始日期" width="160"></el-table-column>
        <el-table-column align="center" prop="trainenddate" label="培训结束日期" width="160"></el-table-column>
        <el-table-column align="center" prop="transportSalary" label="车旅费" width="120"></el-table-column>
        <el-table-column align="center" prop="ischeck" label="是否被审批通过" width="120"></el-table-column>
        <el-table-column align="center" prop="isfinish" label="是否完成培训" width="120"></el-table-column>
        <el-table-column align="center" prop="remark" label="报表内容" width="200"></el-table-column>
        <el-table-column fixed="right" width="200" label="操作">
          <template slot-scope="scope">
                       <el-button v-show="scope.row.isfinish==0&&scope.row.ischeck==1" @click="EndTrain(scope.row)" style="padding: 3px" size="mini" type="primary">完成培训</el-button>

            <!--            <el-button @click="deleteEmp(scope.row)" style="padding: 3px" size="mini" type="danger">删除-->
            <!--            </el-button>-->
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      title="新 建 培 训"
      :visible.sync="newTraindialog"
      width="80%"
      :before-close="handleClose">



      <el-table
        :data="trainemp"
        :row-style="{height: '0'}"
        :cell-style="{padding: '0'}"
        style="width: 100%"
        @row-click="getDetails"

      >
        <el-table-column align="center" prop="userId" label="员工Id" width="100" fixed></el-table-column>
        <el-table-column align="center" prop="username" label="姓名" width="75"></el-table-column>
        <el-table-column align="center" prop="gender" label="性别" width="75"></el-table-column>
        <el-table-column align="center" prop="departmentId" label="部门Id" width="75"></el-table-column>
        <el-table-column align="center" prop="departmentName" label="部门名" width="80"></el-table-column>
        <el-table-column align="center" prop="workId" label="工号" width="75"></el-table-column>
        <el-table-column align="center" prop="workName" label="职位" width="75"></el-table-column>
        <el-table-column align="center" prop="role" label="权限" width="75"></el-table-column>
        <!--        <el-table-column align="center" prop="istrain" label="" width="75"></el-table-column>-->
        <el-table-column fixed="right" width="200" label="操作">
          <template slot-scope="scope">
            <el-button @click="starttrain(scope.row)" style="padding: 3px" size="mini">开始培训</el-button>
            <!--          <el-button @click="deleteEmp(scope.row)" style="padding: 3px" size="mini" type="primary">查看-->
            <!--          </el-button>-->
          </template>
        </el-table-column>
      </el-table>



      <span slot="footer" class="dialog-footer">
    <el-button @click="newTraindialog = false">取 消</el-button>

  </span>
    </el-dialog>

    <el-dialog
      title="培 训 选 择"
      :visible.sync="Trainsessiondialog"
      width="30%"
      :before-close="handleClose">
      <span slot="footer" class="dialog-footer">

           <el-form ref="form" label-width="100px" v-model="trains" :rules="rule">
        <el-row>
          <el-col :span="6">
            <el-form-item label="培训起始时间">
               <el-date-picker
                 size="mini"
                 type="datetime"
                 placeholder="请选择培训起始时间和日期"
                 value-format="yyyy-MM-dd HH:mm:ss"
                 v-model="trains.trainstartdate">
    </el-date-picker></el-form-item>
          </el-col>
          <!-- <el-col :span="6">-->
          <!--            <el-form-item label="选择培训结束时间">-->
          <!--               <el-date-picker-->
          <!--                 size="mini"-->
          <!--                 type="datetime"-->
          <!--                 placeholder="请选择培训起始时间和日期"-->
          <!--                 value-format="yyyy-MM-dd HH:mm:ss"-->
          <!--                 v-model="trains.trainstartdate">-->
          <!--    </el-date-picker></el-form-item>-->
          <!--          </el-col>-->
        </el-row>

      </el-form>
    <span>{{trains.trainstartdate}}</span>

    <el-button @click="Trainsessiondialog = false">取 消</el-button>
    <el-button type="primary" @click="submitCheck">确 定 </el-button>
  </span>
    </el-dialog>


    <el-dialog
      title="报 表 提 交"
      :visible.sync="FinDialog"
      width="30%"
      :before-close="handleClose">
      <span slot="footer" class="dialog-footer">

           <el-form ref="form" label-width="100px" v-model="trains" :rules="rule">
        <el-row>
          <el-col :span="20">
            <el-form-item label="工作报表">
               <el-input v-model="trains.remark" maxlength="30">
               </el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">-->
          <!--            <el-form-item label="选择培训结束时间">-->
          <!--               <el-date-picker-->
          <!--                 size="mini"-->
          <!--                 type="datetime"-->
          <!--                 placeholder="请选择培训起始时间和日期"-->
          <!--                 value-format="yyyy-MM-dd HH:mm:ss"-->
          <!--                 v-model="trains.trainstartdate">-->
          <!--    </el-date-picker></el-form-item>-->
          <!--          </el-col>-->
        </el-row>

      </el-form>
    <span>培训起始日期：{{trains.trainstartdate}}</span>

    <el-button @click="FinDialog = false">取 消</el-button>
    <el-button type="primary" @click="submitFinish">完 成 </el-button>
  </span>
    </el-dialog>

    <el-dialog
      title="培 训 内 容 填 写"
      :visible.sync="Traincreatedialog"
      width="60%"
      :before-close="handleClose">
      <span slot="footer" class="dialog-footer">

           <el-form ref="form" label-width="100px" v-model="trains" :rules="rule">
        <el-row>
          <el-col :span="8">
            <el-form-item label="培训内容">
              <el-input  v-model="trains.remark"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车旅费">
              <el-input v-model="trains.transportSalary"></el-input>
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>


    <el-button @click="Traincreatedialog = false">取 消</el-button>
    <el-button type="primary" @click="OncreateNewTrain">创 建</el-button>
  </span>
    </el-dialog>





    <!--    <div class="block">-->
    <!--      <span class="demonstration">起始日期时刻为 12:00:00</span>-->
    <!--      <el-date-picker-->
    <!--        v-model="value6"-->
    <!--        @change="dateChangebirthday1"-->
    <!--        type="datetimerange"-->
    <!--        format="yyyy-MM-dd HH:mm"-->
    <!--        value-format="yyyy-MM-dd HH:mm"-->
    <!--        start-placeholder="开始日期"-->
    <!--        end-placeholder="结束日期"-->
    <!--        :default-time="['12:00:00']"-->
    <!--      ></el-date-picker>-->
    <!--    </div>-->
    <!--  <div>-->
    <!--    <el-date-picker-->
    <!--    size="mini"-->
    <!--    type="datetime"-->
    <!--    placeholder="请选择培训时间和日期"-->
    <!--    value-format="yyyy-MM-dd HH:mm:ss"-->
    <!--    v-model="traintime"-->
    <!--    >-->

    <!--    </el-date-picker>-->
    <!--  </div>-->
    <!--  <span>{{traintime}}</span>-->

  </div>

</template>

<script>
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'
  export default {
    name: "person_management",
    data() {
      return {
        traintime:"",
        value6: "",
        startTime: "",
        searchInput:"",
        IsFinish:"",
        IsCheck:"",
        seetype:"trainrageAsc",
        options:[
          {
            label:"默认",
            value:"trainrageAsc",
          },
          {
            label:"审批中",
            value:"nocheck",
          },
          {
            label:"已审批",
            value:"ischeck",
          },
          {
            label:"培训中",
            value:"nofinish",
          },
          {
            label:"培训完成",
            value:"isfinish",
          },
        ],




        trainemp:[],
        trainemps:{
          userId: "",
          username: "",
          gender: "",
          workId:  "",
          workName: "",
          departmentId: "",
          departmentName:"",
          role:"",
          istrain: "",
          remark:"",


        },
        train:[],
        trains:{
          trainrage:"",
          userId:"",
          username:"",
          gender:"",
          trainskill:"",
          trainstartdate:"",
          trainenddate:"",
          ischeck:"",
          isfinish:"",
          remark:"",
        },


        newTraindialog:false,
        Trainsessiondialog:false,
        Traincreatedialog:false,
        FinDialog : false,
      };
    },
    mounted() {
      this.$store.state.departmentId = window.sessionStorage.getItem("departmentId")
      this.$store.state.userId = window.sessionStorage.getItem("userId")
      this.reloadtrain()

    },
    methods: {
      //定义导出Excel表格事件
      exportExcel() {
        let xlsxParam = { raw: true }; //转换成excel时，使用原始的格式
        / generate workbook object from table /;
        /* 从表生成工作簿对象 */
        let table =  document.querySelector("#out-table").cloneNode(true)
        // 因为element-ui的表格的fixed属性导致多出一个table，会下载重复内容，这里删除掉
        table.removeChild(table.querySelector(".el-table__fixed-right"));
        table.removeChild(table.querySelector(".el-table__fixed"));
        let wb = XLSX.utils.table_to_book(
          table ,  //elementui 表格的id
          xlsxParam
        );

        /* 获取二进制字符串作为输出 */
        var wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          FileSaver.saveAs(
            //Blob 对象表示一个不可变、原始数据的类文件对象。
            //Blob 表示的不一定是JavaScript原生格式的数据。
            //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            new Blob([wbout], { type: "application/octet-stream" }),
            //设置导出文件名称
            "员工培训表.xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
      },
      reloadtrain()
      {
        this.train = []
        this.$axios.post("/Employee_train/selectTrainByuserId",{
          userId:this.$store.state.userId,
          departmentId:this.$store.state.departmentId
        }).then((res)=>{
          this.train = res.data
        })
      },
      ClearInput()
      {
        this.reloadtrain()
        this.searchInput =""
      },

      returnlogin(){

        this.$router.push({path: '/user_department'})
      },
      watchsearch()
      {
        var see = JSON.stringify(this.seetype).replace(/\"/g, "")
        // alert(see)
        if(this.searchInput ==''|| this.searchInput =='undefined'||this.searchInput == null)
        {
          this.reloadtrain()
        }else if(see == 'trainrageAsc'){

        }else if(see =='nocheck')
        {
          this.train = []
          this.$axios.post("/Employee_train/selectTrainByIsCheckAndDepartmentId",{
            userId:this.searchInput,
            departmentId:this.$store.state.departmentId,
            ischeck:0
          }).then((res)=>{
            this.train = res.data
          })
        }else if(see =='ischeck')
        {
          this.train = []
          this.$axios.post("/Employee_train/selectTrainByIsCheckAndDepartmentId",{
            userId:this.searchInput,
            departmentId:this.$store.state.departmentId,
            ischeck:1
          }).then((res)=>{
            this.train = res.data
          })
        }else if(see =='isfinish')
        {
          this.train = []
          this.$axios.post("/Employee_train/selectTrainByIsFinishAndDepartmentId",{
            userId:this.searchInput,
            departmentId:this.$store.state.departmentId,
            isfinish:1
          }).then((res)=>{
            this.train = res.data
          })
        }
        else if(see =='nofinish')
        {
          this.train = []
          this.$axios.post("/Employee_train/selectTrainByIsFinishAndDepartmentId",{
            userId:this.searchInput,
            departmentId:this.$store.state.departmentId,
            isfinish:0
          }).then((res)=>{
            this.train = res.data
          })
        }

      },
      dateChangebirthday1(val) {
        this.startTime = val;
        this.$message.success(this.startTime);
      },
      reloadnewTrain()
      {
        this.trainemp = [];
        this.$axios.post("/Employee_train/selectTrainEmpByDepId",{
          departmentId:this.$store.state.departmentId
        })
          .then((res)=>{
            // alert(JSON.stringify(res.data))
            this.trainemp = res.data
          })
      },
      newTrain()
      {

        this.newTraindialog =true
      },
      starttrain(data)
      {

        this.trains.trainrage="",
          this.trains.userId="",
          this.trains.username="",
          this.trains.gender="",
          this.trains.trainskill="",
          this.trains.trainstartdate="",
          this.trains.trainenddate="",
          this.trains.ischeck="",
          this.trains.isfinish="",
          this.trains.remark="",
          this.trains = data
        this.Traincreatedialog = true;
        // this.Trainsessiondialog = true;
        // this.$confirm('确认选择'+JSON.stringify(data.userId).replace(/\"/g, "")+"培训?")
        //   .then(_ => {
        //
        //       this.$axios.post("/Employee_train/",{
        //           userId:this.trains.userId,
        //           username:this.trains.username,
        //           gender:this.trains.gender,
        //           trainskill:this.trains.trainskill,
        //       })
        //
        //     this.newTraindialog = false
        //     this.reloadtrain()
        //     done();
        //   })
        //   .catch(_ => {
        //
        //
        //   });
      },
      beginTrain(data)
      {
        this.trains.trainrage="",
          this.trains.userId="",
          this.trains.username="",
          this.trains.gender="",
          this.trains.trainskill="",
          this.trains.trainstartdate="",
          this.trains.trainenddate="",
          this.trains.ischeck="",
          this.trains.isfinish="",
          this.trains.remark="",
          this.trains = data
        this.Trainsessiondialog =true
        alert(JSON.stringify(this.trains))
      },
      cancelTrain(data)
      {
        this.trains.trainrage="",
          this.trains.userId="",
          this.trains.username="",
          this.trains.gender="",
          this.trains.trainskill="",
          this.trains.trainstartdate="",
          this.trains.trainenddate="",
          this.trains.ischeck="",
          this.trains.isfinish="",
          this.trains.remark="",
          this.trains = data,
          this.$confirm('确认关闭？')
            .then(_ => {
              this.$axios.post("/Employee_train/CancelNotCheckTrain",{
                userId:this.trains.userId,
                trainrage:this.trains.trainrage
              }).then((res)=>{

                this.$axios.post("/Employee_train/selectAlltrain",{}).then((res)=>{
                  this.train = res.data
                })
                this.trainemp = [];
                this.$axios.post("/Employee_train/selectTrainEmp")
                  .then((res)=>{
                    this.trainemp = res.data
                  })
                this.$message.success(res.data.msg)
              })
              this.reloadtrain()
              this.reloadnewTrain()
              done();
            })
            .catch(_ => {


            });
      },
      EndTrain(data)
      {
        this.trains.trainrage="",
          this.trains.userId="",
          this.trains.username="",
          this.trains.gender="",
          this.trains.trainskill="",
          this.trains.trainstartdate="",
          this.trains.trainenddate="",
          this.trains.ischeck="",
          this.trains.isfinish="",
          this.trains.remark="",
          this.trains = data,
          this.FinDialog = true
      },
      submitFinish()
      {

        this.$axios.post("/Employee_train/FinishTrain",{
          remark:this.trains.remark,
          trainrage:this.trains.trainrage,
          trainenddate:this.getNowFormatDate(),
          userId:this.trains.userId
        }).then((res)=>{
          this.reloadtrain()
          this.reloadnewTrain()
          this.$message.success(res.data.msg)
        })
        this.FinDialog = false
      },
      submitCheck()
      {
        this.$axios.post("/Employee_train/StartTrain",{
          userId:this.trains.userId,
          username:this.trains.username,
          trainrage:this.trains.trainrage,
          ischeck:this.trains.ischeck,
          trainstartdate:this.trains.trainstartdate
        }).then((res)=>{
          if(res.status == 200)
          {
            this.reloadtrain()
            this.reloadnewTrain()
            this.$message.success(res.data.msg)
            this.Trainsessiondialog = false
          }

        })
      },
      OncreateNewTrain()
      {



        this.$axios.post("/Employee_train/InsertNewTrain",{
          userId:this.trains.userId,
          username:this.trains.username,
          gender:this.trains.gender,
          trainskill:this.trains.trainskill,
          transportSalary:this.trains.transportSalary
        }).then((res)=>{
          if(res.status == 200)
          {
            this.$message.success(res.data.msg)
            this.train = []
            this.$axios.post("/Employee_train/selectTrainByDepId",{
              departmentId:this.$store.state.departmentId
            }).then((res)=>{
              this.train = res.data
            })
            this.trainemp = [];
            this.$axios.post("/Employee_train/selectTrainEmpByDepId",{
              departmentId:this.$store.state.departmentId
            })
              .then((res)=>{
                // alert(JSON.stringify(res.data))
                this.trainemp = res.data
              })
          }
        })
        this.reloadtrain()
        this.reloadnewTrain()
        this.newTraindialog = false
        this.Traincreatedialog = false

        done();
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.Trainsessiondialog = false
            this.newTraindialog = false
            this.Traincreatedialog =false
            this.FinDialog = false
            this.reloadtrain()
            this.reloadnewTrain()
            done();
          })
          .catch(_ => {


          });
      },
      getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
          + " " + date.getHours() + seperator2 + date.getMinutes()
          + seperator2 + date.getSeconds();
        return currentdate;
      }

    },

  }
</script>

<style scoped>

</style>
